<template>
	<div class="search-div">
		<van-search autofocus show-action placeholder="搜索城市/省份" 
		@focus="focusInput"
		@update:model-value="updateInput"
		v-model="keywords"
		@clear="clearEvent"
		@cancel="cancelEvent"
		/>
	</div>
	<!-- 占位高度 -->
	<div class="search-height"></div>
	<!-- 左边国家和右边城市 -->
	<div v-show="searchShow" class="global-display">
		<van-sidebar v-model="active" class="country-list fadeIn">
		  <van-sidebar-item v-for="(item,index) in recoCountry" 
		  :key="index" :title="item.country" 
		  @click="onChange(item.type)"
		  />
		</van-sidebar>
		<div class="right-city">
			<div v-if="show">
				<div class="gps-city">
					<p>GPS定位</p>
					<p @click="chooseCity(address)">{{address}}</p>
				</div>
				<!-- 推荐下展示的城市 -->
				<div v-for="(item,index) in recoCity" :key="index">
					<p class="recoType" v-if="item.data.length > 0">{{item.title}}</p>
					<div class="recommend-city global-display global-f-wrap fadeIn">
						<div v-for="(item_a,index_a) in item.data" :key="index_a" @click="chooseCity(item_a._id)">
							<img :src="item_a.image">
							<p class="text-show">{{item_a._id}}</p>
						</div>
					</div>
				</div>
			</div>
			<!-- 每个国家下的城市数据 -->
			<div  v-if="!show" class="recommend-city global-display global-f-wrap fadeIn">
				<div v-for="(item,index) in countryCity" :key="index" @click="chooseCity(item.city)">
					<img :src="item.image" alt="">
					<p class="text-show">{{item.city}}</p>
				</div>
			</div>
		</div>
	</div>
	<!-- 展示搜索列表 -->
	<div v-show="!searchShow">
		<div class="search-City" v-for="(item,index) in searchList" :key="index">
			<p @click="chooseCity(item.provinceName)">{{item.provinceName}}</p>
			<p v-for="(item_a,index_a) in item.citys" 
			@click="chooseCity(item_a.cityName)">{{item_a.cityName}}</p>
		</div>
	</div>
</template>

<script setup>
	import { ref,onMounted } from 'vue';
	import request from '@/api/request.js'
	import { qqLbs } from "@/api/qq-lbs.js"
	// 防抖函数
	import {debounce} from '@/api/debounce.js'
	// pinia
	import { dataSet } from "@/store/index.js";
	const store = dataSet();
	import { useRouter } from 'vue-router'
	const $router = useRouter()  // 这是路由跳转的
	const active = ref(0)
	// 定位
	const address = ref('昆明市')
	// 存储左边的国家数据
	const recoCountry = ref([])
	// 存储右边推荐下的城市数据
	const recoCity = ref([
		{
			title:'本月热门',
			data:[]
		},
		{
			title:'自由行必去',
			data:[]
		},
		{
			title:'热度飙升',
			data:[]
		}
	])
	// 显示||隐藏：推荐下和国家下数据
	const show = ref(true)
	// 请求数据:左边国家，右边城市
	onMounted(async()=>{
		// 定位
		address.value = await qqLbs()
		const leftData = await request.get('/country_class')
		const rightData = await request.get('/choose_address',{type:'AAA'})
		recoCountry.value = leftData.data
		recoCity.value[0].data = rightData.data.currentMonth
		recoCity.value[1].data = rightData.data.freedom
		recoCity.value[2].data = rightData.data.heatCity
	})
	// 每个国家下的数据
	const countryCity = ref([])
	// 切换国家
	async function onChange(type){
		const rightData = await request.get('/choose_address',{type})
		if(type == 'AAA'){
			recoCity.value[0].data = rightData.data.currentMonth
			recoCity.value[1].data = rightData.data.freedom
			recoCity.value[2].data = rightData.data.heatCity
			show.value = true
		}else{
			countryCity.value = rightData.data
			show.value = false
		}
	}
	// ----------------搜索部分----------------------
	// 显示||隐藏：搜索结果
	const searchShow = ref(true)
	// 搜索关键词
	const keywords = ref('')
	const updateInput = debounce(seacrhKeyword)
	// 存储实时搜索列表
	const searchList = ref([])
	// 输入时触发
	async function seacrhKeyword(){
		searchShow.value = keywords.value == '' ? true : false
		// 请求搜索列表
		const res = await request.get('/china_data',{keywords:keywords.value})
		console.log(res)
		searchList.value = res.data
	}
	// 获取焦点时触发:如果输入框为空，则保持默认状态，否则显示搜索结果部分
	async function focusInput(){
		searchShow.value = keywords.value == '' ? true : false
	}
	// 输入框清空按钮
	function clearEvent(){
		keywords.value == ''
		searchShow.value = true
	}
	// 取消触发
	function cancelEvent(){
		
	}
	// 选择城市到pinia到定位页面
	function chooseCity(city){
		store.$patch({
		  address: city
		})
		$router.push('/found')
	}
</script>

<style>
.search-div{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}
.search-height{
	height: 60px;
}
.country-list{
	position: fixed;
	left: 0;
	top: 60px;
}
:root:root {
	--van-sidebar-selected-text-color: #efab3d;
	--van-sidebar-selected-border-color: #efab3d;
	--van-sidebar-font-size:16px;
}
.right-city{
	padding: 10px;
	flex: 1;
	margin-left: 80px;
}
.gps-city{
	margin-top: 10px;
}
.gps-city p:nth-child(1){
	font-weight: bold;
}
.gps-city p:nth-child(2){
	background-color: #f7f7f7;
	display: inline-block;
	border-radius: 5px;
	padding: 8px 30px;
	margin-top: 10px;
}
.recoType{
	font-weight: bold;
	padding: 20px 0 10px 0;
}
.recommend-city img{
	width: 100%;
	height: 80px;
	object-fit: cover;
}
.recommend-city div{
	width: calc(33.33% - 5px*2);
	margin: 5px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	height: 80px;
}
.recommend-city p{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	color: #ffffff;
	margin: 5px 0;
	font-size: 15px;
}
/* 触发实时搜索展示 */
.search-City{
	padding: 0 10px;
}
.search-City p{
	border-bottom: 1px solid #e3e4e7;
	height: 40px;
	line-height: 40px;
}
.search-City p:nth-child(1){
	font-weight: bold;
	color: goldenrod;
}
</style>